<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<title>个人中心－收到的留言</title>
	</head>
	<body>
		<!-- self_info -->
		<div class="grzxbj">
			<div class="selfinfo center">
			<div class="lfnav fl">
				<div class="ddzx">我的商品</div>
				<div class="subddzx">
					<ul>
						<li><a href="${pageContext.request.contextPath}/toMy/sell">出售中的商品</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/tradingSuccess">已出售的商品</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/trading">交易中的商品</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/shelves">已下架的商品</a></li>
					</ul>
				</div>
				<div class="ddzx">个人中心</div>
				<div class="subddzx">
					<ul>
						<li><a href="${pageContext.request.contextPath}/toMy/my">我的资料</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/notice">消息通知</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/rMessage" style="color:#ff6700;font-weight:bold;">收到的留言</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/sMessage">发布的留言</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/criminalRecords">违规记录</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/report">举报记录</a></li>
					</ul>
				</div>
			</div>
			<div class="rtcont fr">
				<div class="grzlbt ml40">收到的留言</div>
				<c:if test="${pagerModel.dates[0] != '' && pagerModel.dates[0] != null}">
					<c:forEach items="${pagerModel.dates}" var="cshtMessageVoList">
						<div class="media r-message-media">
						  <div class="media-left media-middle r-message-media-left">
						    <a href="javascript:void(0)" class="goods-img">
						      <img class="media-object" src="/csht_file/goods_images/${cshtMessageVoList.cshtGoodsVo_3.cshtGoodsImagesList[0].goodsImagesPath}" alt="商品图" title="点击看大图">
						    </a>
						  </div>
						  <div class="media-body r-messag-body">
						  		<h4 class="media-heading">
						  			<span>【商品标题】</span>
						  			${cshtMessageVoList.cshtGoodsVo_3.goodsTitle}
						  		</h4>
						  		<span>【留言内容】</span>
						  		${cshtMessageVoList.messageContent}
						  </div>
						  <div class="r-messag-center">
						  	<time>${cshtMessageVoList.messageTime}</time>
						  	<a data-toggle="modal" class="r-messag-xiangxi" data-target="#r-messag-xiangxi-modal">查看详细</a>
						  	<input type="hidden" value="${cshtMessageVoList.messageId}">
						  </div>
						  <div class="r-message-media-right">
						  	<a href="${pageContext.request.contextPath}/goods/getGoodsListByUserId/${cshtMessageVoList.cshtUser.userId}" target="_blank" title="留言者：${cshtMessageVoList.cshtUser.userUsername}">
							  	<img src="/csht_file/user_header/${cshtMessageVoList.cshtUser.userHeadPath}">
							  	<span>${cshtMessageVoList.cshtUser.userUsername}</span>
						  	</a>
						  </div>
						</div>
					</c:forEach>
					<jsp:include page="../page/page.jsp">
						<jsp:param name="url" value="${pageContext.request.contextPath}/toMy/rMessage"/>
						<jsp:param name="items" value="${pagerModel.totalSize}"/>
						<jsp:param name="maxPageItems" value="${pagerModel.messagePageSize}"/>
					</jsp:include>
				</c:if>
				
				<c:if test="${pagerModel.dates[0] == '' || pagerModel.dates[0] == null}">
					<div class="null_tishi">
						<img src="${pageContext.request.contextPath}/static/image/null_tishi.gif">
						<p id="autoText">什么都没有…</p>
					</div>
				</c:if>
			</div>
			
			<!-- 浏览商品图模态框 -->
			<div class="modal fade r-messag-modal" id="r-messag-modal" tabindex="-1" role="dialog">
			  <div class="modal-dialog r-messag-modal-dialog" role="document">
			    <div class="modal-content r-messag-modal-content">
			      <div class="modal-body r-messag-modal-body">
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- 浏览商品图模态框 -->
			
			<!-- 留言详细模态框 -->
			<div class="modal fade" id="r-messag-xiangxi-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel">商品标题</h4>
			      </div>
			      <div class="modal-body">
			        
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
			    </div>
			  </div>
			</div><!-- 留言详细模态框 -->
			
			<div class="clear"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			$(document).ready(function(){
				
				//点击商品图，浏览大图
				$(".goods-img").on("click", function(){
					var imgSrc = $(this).children("img").attr("src"); //获取图片地址
					$("#r-messag-modal .modal-body").html("<img src='" + imgSrc + "' alt='商品图'>");
					$("#r-messag-modal").modal("show");
				});
				
				//点击商品图，浏览大图时，再次点击将隐藏模态框
				$("#r-messag-modal").on("click", function(){
					$("#r-messag-modal").modal("hide");
				});
				
				
				//点击查看详细
				$(".r-messag-xiangxi").on("click", function(){
					$("#r-messag-xiangxi-modal .modal-body").html("<img src='${pageContext.request.contextPath}/static/image/loading.gif' style='margin-left:45%;'>加载中…");
					var messageId = $(this).siblings("input[type='hidden']").val();
					$.ajax({
						url: "${pageContext.request.contextPath}/toMy/getMessageByMessageId",
						type: "POST",
						dataType: "JSON",
						data: {
							"messageId": messageId,
						},
						success: function(data){
							
							//商品标题
							var htmlStrTitle = data.cshtMessageVo.cshtGoodsVo_3.goodsTitle;
							
							//商品图片
							var htmlStrGoodsImg = "<div class='goods-imgs'>";
							for(var i = 0; i < data.cshtMessageVo.cshtGoodsVo_3.cshtGoodsImagesList.length; i++){
								var j = data.cshtMessageVo.cshtGoodsVo_3.cshtGoodsImagesList;
								htmlStrGoodsImg += "<div title='点击看大图' class='ddd'><a href='javascript:void(0)' class='goods-img'><img src='/csht_file/goods_images/" + j[i].goodsImagesPath + "' alt='商品图'></a></div>";
							}
							htmlStrGoodsImg += "</div>";
							
							//商品明细
							var htmlStrGoodsDetail = "<div class='goods-detail'>";
							htmlStrGoodsDetail += "<span class='span_1'>价格：<span class='span_2'>￥" + data.cshtMessageVo.cshtGoodsVo_3.goodsPrice + "</span></span>";
							htmlStrGoodsDetail += "<span class='span_1'>商品状态：<span class='span_2'>" + data.cshtMessageVo.cshtGoodsVo_3.goodsState + "</span></span>";
							htmlStrGoodsDetail += "<span class='span_1'>品牌：<span class='span_2'>" + data.cshtMessageVo.cshtGoodsVo_3.cshtBrand.brandName + "</span></span>";
							htmlStrGoodsDetail += "<span class='span_1'>联系方式：<span class='span_2'>" + data.cshtMessageVo.cshtGoodsVo_3.goodsTradeWay + "</span></span>";
							htmlStrGoodsDetail += "<span class='span_1'>类别：<span class='span_2'>" + data.cshtMessageVo.cshtGoodsVo_3.cshtOneMenu.oneMenuName + "/";
							htmlStrGoodsDetail += data.cshtMessageVo.cshtGoodsVo_3.cshtTwoMenu.twoMenuName + "/" + data.cshtMessageVo.cshtGoodsVo_3.cshtThreeMenu.threeMenuName + "</span></span>";
							htmlStrGoodsDetail += "<span class='span_1'>浏览量：<span class='span_2'>" + data.cshtMessageVo.cshtGoodsVo_3.goodsBrowseTime + "</span></span>";
							htmlStrGoodsDetail += "<span class='span_1'>所属学校：<span class='span_2'>" + data.cshtMessageVo.cshtGoodsVo_3.goodsTradeSchool + "</span></span>";
							htmlStrGoodsDetail += "</div>";
							
							//商品介绍
							var htmlStrGoodsContent = "<div class='goods-content'><p><span>【商品介绍】</span>";
							htmlStrGoodsContent += data.cshtMessageVo.cshtGoodsVo_3.goodsContent;
							htmlStrGoodsContent += "</p><p class='seeGoods-a'><a href='${pageContext.request.contextPath}/goods/goodsDetails/" + data.cshtMessageVo.cshtGoodsVo_3.goodsId + "' target='_blank'>查看该商品&gt;&gt;</a></p></div>";
							
							//留言区
							var htmlStrGoodsMessage = "<div class='goods-message'><p>留言区：</p>";
							htmlStrGoodsMessage += "<div class='goods-message-div'>";
							htmlStrGoodsMessage += "<div class='goods-message-user' title='" + data.cshtMessageVo.cshtUser.userUsername + "'>";
							htmlStrGoodsMessage += "<img src='/csht_file/user_header/" + data.cshtMessageVo.cshtUser.userHeadPath + "'>";
							htmlStrGoodsMessage += "<span>" + data.cshtMessageVo.cshtUser.userUsername + "</span>";
							htmlStrGoodsMessage += "</div>";
							htmlStrGoodsMessage += "<div class='goods-message-message'>" + data.cshtMessageVo.messageContent + "</div>";
							htmlStrGoodsMessage += "<time>" + data.cshtMessageVo.messageTime + "</time>";
							htmlStrGoodsMessage += "</div></div></div>";
							
							//添加到模态框
							$("#r-messag-xiangxi-modal #myModalLabel").text(htmlStrTitle);
							$("#r-messag-xiangxi-modal .modal-body").html(htmlStrGoodsImg + htmlStrGoodsDetail + htmlStrGoodsContent + htmlStrGoodsMessage);
						}
					});
				});

				/*跳跳字体动画
				 *  参数详解:
				 *	upTime			上移的时间
				 *	downTime		下落的时间
				 *	beatHeight		上移高度
				 *	isAuth			是否自动
				 *	isRotate		是否旋转
				*/
				$('p#autoText').beatText({isAuth:true,beatHeight:"1.5em",isRotate:false});
				
			})
		</script>
		
		
	</body>
</html>